<template>
  <div class="notice_title">
    <!-- 通知页面,标题(unitui-assets-json-route.json) -->
    <span class="title">{{ $route.meta.web_title }}</span>
    <!-- 通知页面,➕按钮 -->
    <el-button
      size="mini"
      type="primary"
      class="add_button"
      icon="el-icon-plus">
    </el-button>
    <!-- 
    type="primary" 代表主要按钮
    参考文档：https://element-plus.gitee.io/#/zh-CN/component/button
    -->
  </div>
  <el-row :gutter="10" style="margin-top:10px">
    <el-col v-for="(data,index) in data" :key="index" :xs="24" :sm="8">
      <el-card :style="{marginTop:index>=3?'10px':'0'}">
        <template #header>
          <div class="card-header">
            <!-- data里的notice_title 进行+1显示 -->
            <span>{{data.notice_title+(index+1)}}</span>
            <!-- 标签居右 -->
            <el-dropdown style="float:right">
              <span class="el-dropdown-link">
                <!-- 卡片三个点 -->
                <i class="el-icon-more"></i>
              </span>
              <!-- dropdown 可展开的 -->
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <!-- 下拉 定位-->
                      <i class="el-icon-position"></i>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <!-- 下拉 打钩 -->
                      <i class="el-icon-check"></i>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <!-- 下啦 删除 -->
                      <i class="el-icon-delete"></i>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        <div v-for="o in 10" :key="o" class="text item">
          <!-- 循环下面的通知内容 -->
          {{ data.notice_content + o }}
        </div>
      </el-card>
    </el-col>
  </el-row>
  <div style="margin-top:10px">
    <!-- 页数 -->
    <Upage :pc="pc" :page="page" ></Upage>
    <!-- v-bind可以缩写为: -->
  </div>
</template>
<script>
import Upage from "@/unitui/sub/Upage.vue";
export default {
  // export default js模块化，导出一个模块，你这边export，那边就import
    components:{
      // components 注册全局组件，
        Upage
    },
  props: ["pc"], // 将值传给它
  data(){
      return{
          page:{
              pn:1, // 起始页
              rn:10, // 10条/页
              total:100 // 共100条
          },
          data:[
              {
                  notice_title:'通知标题',
                  notice_content:'这是通知内容'
              },
              {
                  notice_title:'通知标题',
                  notice_content:'这是通知内容'
              },
              {
                  notice_title:'通知标题',
                  notice_content:'这是通知内容'
              },
              {
                  notice_title:'通知标题',
                  notice_content:'这是通知内容'
              },
              {
                  notice_title:'通知标题',
                  notice_content:'这是通知内容'
              },
              {
                  notice_title:'通知标题',
                  notice_content:'这是通知内容'
              },
              {
                  notice_title:'通知标题',
                  notice_content:'这是通知内容'
              },
              {
                  notice_title:'通知标题',
                  notice_content:'这是通知内容'
              },
          ]
      }
  }
};
</script>
<style scoped>
.title {
  float: left;
  font-size: 20px;
  color: #6c757d;
}
.notice_title {
  width: 100%;
  height: 30px;
}
.add_button {
  float: right;
}
</style>